<template>
  <div
    v-if="scholarFinished"
    class="class-info-bottom"
  >
    <span
      v-if="userScholarship <= 0 || !$store.state.instInfo.IsScholarInst"
      class="class-price"
    >
      ￥{{ classInfo.ClassPrice }}
      <span class="original-price">
        {{ classInfo.ClassOrginPrice }}
      </span>
    </span>
    <span
      v-else
      class="class-price-discount"
    >
      奖学金折扣后
      <span class="discount-price">
        ￥{{ classInfo.ClassPrice - userScholarship > 0 ?
          (classInfo.ClassPrice - userScholarship).toFixed(2) : '0.00' }}
      </span>
    </span>
    <!-- <span
      class="add-collect"
      @click="onAddCollect"
    >
      {{ classInfo.IsCollection ? '已收藏' : '加入收藏' }}
    </span> -->
    <van-button
      v-if="classStatus === 1"
      class="enroll-learn"
      :disabled="disabledEnroll"
      @click="onOrderClass"
    >
      报名学习
    </van-button>
    <van-button
      v-if="classStatus === 2"
      class="enroll-learn"
      @click="onNavPay"
    >
      立即支付
    </van-button>
  </div>
</template>
<script lang="ts">
import Vue from 'vue'
import { SET_PAYINFO } from '@/store/mutations'
export default Vue.extend({
  props: {
    classInfo: {
      default: () => ({}),
      type: Object,
    },
  },
  data () {
    return {
      userScholarship: '0.00',
      scholarFinished: false,
      disabledEnroll: false,
    }
  },
  computed: {
    classStatus (): number {
      if (this.classInfo.ClassStatus === 1 || this.classInfo.ClassStatus === 3) {
        return 1
      }
      if (this.classInfo.ClassStatus === 4) {
        return 2
      }
      return 0
    },
  },
  created () {
  },
  methods: {
    // 获取奖学金详情
    getUserScholarshipDetail () {
      this.$axios({
        method: 'get',
        url: 'User/GetUserScholarship',
      }).then(res => {
        this.userScholarship = res.UserScholarship
        this.scholarFinished = true
      })
    },
    switchPayAction () {
      if (this.classStatus === 2) {
        this.onNavPay()
      } else if (this.classStatus === 1) {
        this.onOrderClass()
      }
    },
    onOrderClass () {
      this.disabledEnroll = true
      if (this.$store.state.userInfo.UserId === '-1') {
        sessionStorage.setItem('loginFromPage', JSON.stringify({
          from: this.$route.name,
          query: this.$route.query,
        }))
        this.$router.push({ name: 'login' })
        return
      }
      this.$axios({
        url: 'shopping/buyGoodsForWeb',
        data: {
          GoodsInfo: this.$route.query.classId,
          OrangeKey: localStorage.getItem('orangeKey') || '',
          IsMstation: true,
        },
      }).then(res => {
        this.navPay(res.OrderNumber, res.OrderId)
      }).then(() => {
        this.disabledEnroll = true
      }, () => {
        this.disabledEnroll = false
      })
    },
    navPay (orderNumber: string, orderId: string = '') {
      this.$router.push({
        name: 'pay',
        query: {
          orderId,
          orderNumber,
        },
      })
    },
    onNavPay () {
      // TODO:XMJ
      this.navPay(this.classInfo.TradeNo, this.classInfo.OrderId)
    },
    onAddCollect () {
      if (this.$store.state.userInfo.UserId === '-1') {
        sessionStorage.setItem('loginFromPage', JSON.stringify({
          from: this.$route.name,
          query: this.$route.query,
        }))
        this.$router.push({ name: 'login' })
        return
      }
      if (this.classInfo.IsCollection) {
        this.$toast('已加入收藏！')
        return
      }
      this.$axios({
        url: 'user/CollectionOperation',
        data: {
          ClassId: this.$route.query.classId,
          Type: 1,
        },
      }).then(res => {
        this.classInfo.IsCollection = true
        this.$toast('收藏成功！')
      })
    },
  },
})
</script>
<style lang="scss" scoped>
.class-info-bottom {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  background-color: #fff;
  @include px1border(top, #E9E9E9);
}
.class-price {
  position: absolute;
  left: 0;
  color: #CC3300;
  font-size: 32px;
  margin-left: 30px;
  height: 100%;
  line-height: 101px;
}
.original-price {
  color: #A4A9B2;
  font-size: 24px;
  text-decoration: line-through;
}
.class-price-discount {
  position: absolute;
  left: 0;
  color: #4B515E;
  font-size: 21px;
  margin-left: 30px;
  height: 100%;
  line-height: 101px;
  .discount-price {
    color: #CC3300;
    font-size: 28px;
  }
}
.btn-div {
  height: 100px;
}
.enroll-learn, .add-collect {
  width: 220px;
  height: 100%;
  line-height: 101px;
  font-size: 32px;
  color: #ffffff;
  text-align: center;
  background-color: #03C9BB;
  @include px1border(all, #03C9BB);
  border-radius: 0;
}
.add-collect {
  background-color: #4B515E;
}
</style>
